<template>
  <div class="record-timeline">
    <div class="timeline-header">
      <h3>问诊记录</h3>
      <el-input
        v-model="searchKeyword"
        placeholder="搜索记录..."
        class="search-input"
        clearable
        style="width: 300px"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>
    
    <el-timeline class="timeline-content">
      <el-timeline-item
        v-for="(record, index) in filteredRecords"
        :key="record.id"
        :timestamp="record.time"
        placement="top"
      >
        <el-card class="record-card" @click="viewRecordDetail(record)">
          <div class="record-summary">
            <div class="summary-header">
              <h4>{{ record.department }}</h4>
              <el-tag :type="record.status === '已完成' ? 'success' : 'info'">
                {{ record.status }}
              </el-tag>
            </div>
            
            <div class="summary-content">
              <div class="symptom">
                <el-icon><Warning /></el-icon>
                <span>主要症状：{{ record.symptom }}</span>
              </div>
              
              <div class="diagnosis">
                <el-icon><Document /></el-icon>
                <span>初步诊断：{{ record.diagnosis }}</span>
              </div>
              
              <div class="doctor">
                <el-icon><User /></el-icon>
                <span>接诊医生：{{ record.doctor }}</span>
              </div>
            </div>
            
            <div class="record-actions">
              <el-button type="text" @click.stop="viewRecordDetail(record)">
                查看详情
              </el-button>
              <el-button type="text" @click.stop="exportRecord(record)">
                导出记录
              </el-button>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    
    <div v-if="filteredRecords.length === 0" class="no-records">
      <el-empty description="暂无问诊记录" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { 
  ElTimeline, 
  ElTimelineItem, 
  ElCard, 
  ElInput, 
  ElIcon, 
  ElTag, 
  ElButton,
  ElEmpty,
  ElMessage
} from 'element-plus'
import { 
  Search, 
  Warning, 
  Document, 
  User 
} from '@element-plus/icons-vue'

const router = useRouter()

// 搜索关键词
const searchKeyword = ref('')

// 问诊记录数据
const records = ref([
  {
    id: 1,
    time: '2023-05-15 14:30',
    department: '心内科',
    symptom: '胸闷、气短3天，加重伴胸痛2小时',
    diagnosis: '冠心病 急性心肌梗死？',
    doctor: '李医生',
    status: '已完成'
  },
  {
    id: 2,
    time: '2023-04-22 09:15',
    department: '呼吸内科',
    symptom: '咳嗽、咳痰1周，发热2天',
    diagnosis: '社区获得性肺炎',
    doctor: '王医生',
    status: '已完成'
  },
  {
    id: 3,
    time: '2023-03-10 16:45',
    department: '消化内科',
    symptom: '上腹痛、反酸半年，加重3天',
    diagnosis: '胃溃疡',
    doctor: '张医生',
    status: '已完成'
  },
  {
    id: 4,
    time: '2023-02-18 11:20',
    department: '内分泌科',
    symptom: '多饮、多尿、体重下降1个月',
    diagnosis: '2型糖尿病',
    doctor: '赵医生',
    status: '已完成'
  },
  {
    id: 5,
    time: '2023-01-05 13:30',
    department: '神经内科',
    symptom: '头痛、头晕1周',
    diagnosis: '紧张性头痛',
    doctor: '孙医生',
    status: '已完成'
  }
])

// 过滤后的记录
const filteredRecords = computed(() => {
  if (!searchKeyword.value) {
    return records.value
  }
  
  const keyword = searchKeyword.value.toLowerCase()
  return records.value.filter(record => 
    record.department.toLowerCase().includes(keyword) ||
    record.symptom.toLowerCase().includes(keyword) ||
    record.diagnosis.toLowerCase().includes(keyword) ||
    record.doctor.toLowerCase().includes(keyword)
  )
})

// 查看记录详情
const viewRecordDetail = (record) => {
  console.log('查看记录详情:', record)
  // 跳转到病历详情页
  router.push(`/medical-record/${record.id}`)
}

// 导出记录
const exportRecord = (record) => {
  console.log('导出记录:', record)
  ElMessage.success('记录导出成功')
  // 实际项目中这里会调用导出功能
}
</script>

<style scoped>
.record-timeline {
  padding: 20px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.timeline-header h3 {
  margin: 0;
}

.record-card {
  cursor: pointer;
  transition: all 0.3s;
}

.record-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.record-summary {
  padding: 16px;
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.summary-header h4 {
  margin: 0;
  color: #333;
}

.summary-content {
  margin-bottom: 16px;
}

.symptom,
.diagnosis,
.doctor {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.symptom .el-icon,
.diagnosis .el-icon,
.doctor .el-icon {
  margin-right: 8px;
  margin-top: 2px;
  color: #409eff;
}

.record-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.no-records {
  text-align: center;
  padding: 40px 0;
}
</style>